<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>IM项目</title>

    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            width: 100vw;
            height: 100vh;
            display: flex;
            align-items: center;
            flex-direction: column;
        }

        #transImg {
            width: 500px;
            height: 300px;
            border: 1px solid black;
        }

        img {
            width: 100%;
            height: 100%;
        }

        button {
            width: 150px;
            height: 50px;
            background-color: red;
            color: aliceblue;
        }
    </style>

<body>
    <h1>预览区</h1>
    <div id="transImg">
    </div>
    <button onclick="fileUploadNode()">上传文件</button>
    <script>
        let file;
        let tempList
        let token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJJRCI6IjY0YWJjNTk0ZjdiZTAyOWM4ODBkMmQ4OCIsIlVzZXJJZCI6IjY0YWJjNTk0ZjdiZTAyOWM4ODBkMmQ4OCIsIkVtYWlsIjoi6YKu566xIiwic3ViIjoiVG9rZW4iLCJleHAiOjE2ODk4NTE2MTcsImlhdCI6MTY4OTg0NTYxN30.Q4BNfd3_VF0ONrOIlA3zGQw3ALnLNKp4zMBNU70t63U"
        let ws = new WebSocket(`ws://localhost:8080/auth/websocket/msg`, [token])
        const transImg = (file) => {
            let list = [];
            for (let i = 0; i < file.length; i++) {
                const reader = new FileReader();
                reader.addEventListener(
                    "loadend",
                    () => {
                        list.push(reader.result);
                    },
                    false
                );
                reader.readAsDataURL(file[i]);
            }
            tempList = list
            console.log(list);
        }
        //将文件进行转化并通过ws连接发送给服务器
        const transImgText = (file) => {
            for (let i = 0; i < file.length; i++) {
                console.log(file[i]);
                console.log(file[i].name)
                //创建文件读取对象
                let reander = new FileReader()
                reander.readAsArrayBuffer(file[i])
                //读取完毕后执行以下函数
                reander.onload = (evt) => {
                    //收集读取文件内容
                    let binaryString = evt.target.result
                    console.log({
                        name: file[i].name,
                        binaryString,
                        type: 1,
                        room_id: "房间1"
                    });
                    const formData = new FormData()
                    formData.append('file', file[i])
                    // console.log(formData.get("file"));
                    ws.send(file[i])
                }
            }
        }
        let fileUploadNode = () => {
            //创建input标签
            const input = document.createElement("input")
            input.style = "display: block; width: 0; height: 0; padding: 0; border: 0;";
            //设置input属性为file
            input.setAttribute("type", "file")
            //设置input name
            input.setAttribute("name", "file");
            //是否多选
            input.setAttribute("multiple", true);
            //将input标签
            document.body.appendChild(input);
            input.addEventListener("change", (e) => {
                //保存选择的文件
                file = e.target.files
                //调用函数将图片显示出来
                transImg(file)
                transImgText(file)
                console.log(file);
                setTimeout(() => {
                    document.body.removeChild(input);
                    let imgBox = document.getElementById("transImg")
                    const img = document.createElement("img")
                    img.src = tempList[0]
                    console.log(tempList);
                    imgBox.appendChild(img)
                }, 50);
            })
            input.click();

        }
        function wsDemo() {

            //连接成功后的调用的函数
            ws.onopen = function () {
                ws.send(JSON.stringify(
                    {
                        "name": "张三",
                        "age": 23,
                        "message": "我叫张三",
                        "room_id": "房间1"
                    }
                ))
                console.log("连接成功");

            }
            // 从服务器接受到信息时的回调函数
            ws.onmessage = function (e) {
                console.log('收到服务器响应', e.data)

            };
            // 连接失败后的回调函数
            ws.onerror = function (evt) {
                console.log("连接失败了");
                console.log(evt);
            };
            ws.onclose = function (e) {
                console.log('websocket 断开: ' + e.code + ' ' + e.reason + ' ' + e.wasClean)
                console.log(e)
            }
        }
        wsDemo()
    </script>
</body>

</html>